<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>函数化组件</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <div id="app">
    <smart-item :data="data"></smart-item>
    <button @click="change('img')">切换为图片组件</button>
    <button @click="change('video')">切换为视频组件</button>
    <button @click="change('text')">切换为文本组件</button>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
  <script src="" async defer></script>

  <script>
    // 图片组件选项
    var ImgItem = {
      props: ['data'],
      render: function (createElement) {
        return createElement(
          'div',
          [
            createElement(
              'p',
              '图片组件'
            ),
            createElement(
              'img', {
                attrs: {
                  src: this.data.url
                }
              }
            )
          ]
        )
      }
    }

    // 视频组件选项
    var VideoItem = {
      props: ['data'],
      render: function (createElement) {
      return createElement(
        'div',
        [
          createElement(
            'p', 
            '视频组件'
          ),
          createElement(
            'video', 
            {
              attrs:{
                src: this.data.url,
                controls: 'controls',
                autoplay: 'autoplay'
              }
            }
          )
        ]
      )}
    }

    // 纯文本组件选项
    var TextItem = {
      props: ['data'],
      render: function (createElement) {
      return createElement(
        'div',
        [
          createElement(
            'p', 
            '纯文本组件'
          ),
          createElement(
            'p', 
            this.data.content
          )
        ]
      )}
    }

    Vue.component('smart-item', {
      // 函数组件
      functional: true,
      render: function (createElement, context) {
        //根据传入的数据，智能判断显示那种组件
        function getComponent() {
          var data = context.props.data
          // 判断 prop: data的type字段是属于哪种类型的组件
          if (data.type === 'img') {
            return ImgItem
          }
          if (data.type === 'video') {
            return VideoItem
          }
          return TextItem
        }
      return createElement(
        getComponent(),
        {
          props: {
            // 把smart-item的prop:data传给上面智能选择的组件
            data: context.props.data
          }
        },
        context.children
      )}
    })

    var app = new Vue({
      el: '#app',
      data: {
        data: {}
      },
      methods: {
        change(type) {
          if (type === 'img') {
            this.data = {
              type: 'img',
              url: 'https://file.iviewui.com/dist/e1cf12c07bf6458992569e67927d767e.png'
            }
          } else if (type === 'video'){
            this.data = {
              type: 'video',
              url: "http://vjs.zencdn.net/v/oceans.mp4"
            }
          } else if (type === 'text'){
            this.data = {
              type: 'text',
              content: '这是一段纯文本'
            }
          }
        }
      },
      created: function () {  
        this.change('img')
      }
    })
  </script>
</body>

</html>